<template>
  <div class="navWrap">
    <div class="navBox w">
      <!-- 登录 -->
      <span class="loginBtn" @click="loginSpan" v-if="!userInfo.firstName">
        <span>{{ $t("vr.login") }}</span>
        <img src="../../../assets/imgs/item1.png" class="navImg" />
      </span>
      <span class="loginBtn" v-if="userInfo.firstName" @click="gomine">
        {{ userInfo.firstName }} {{ userInfo.lastName }}
        <img src="../../../assets/imgs/item1-b.png" class="navImg" />
      </span>
      <!-- 国际化 -->
      <el-dropdown @command="handleClickLang" class="langBox">
        <span class="el-dropdown-link">
          {{ showLang }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="en">EN</el-dropdown-item>
          <el-dropdown-item command="zh">CN</el-dropdown-item>
          <el-dropdown-item command="de" v-if="!isFoundation"
            >DE</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 搜索 -->
      <span class="search" @click="handleClickSearch">
        <img src="../../../assets/imgs/item2.png" class="navImg" />
        <img src="../../../assets/imgs/item2-b.png" class="navImg" />
      </span>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index"
import { mapState, mapMutations } from "vuex"
export default {
  data () {
    return {
      isFoundation: false
    }
  },
  computed: {
    ...mapState(["lang", "userInfo"]),
    showLang () {
      //Foundation没有德文
      if (this.lang === "de" && this.isFoundation) {
        this.handleClickLang("en")
      }
      return this.lang === "zh" ? "CN" : this.lang.toUpperCase()
    }
  },
  created () {
    this.isFoundation =
      this.$route.path.indexOf("/foundation") >= 0 ? true : false
  },
  mounted () { },
  methods: {
    ...mapMutations(["changeLang", "isShowLogin"]),
    // 切换语言
    handleClickLang (command) {
      this.$i18n.locale = command
      this.changeLang(command)
    },
    loginSpan () {
      // 显示弹窗，登录
      this.isShowLogin("show")
    },
    // 跳转搜索页
    handleClickSearch () {
      this.$router.push({
        path: `/${this.isFoundation ? "foundation" : "fakuma"}/pc/search`
      })
    },
    gomine () {
      let r = "/foundation/pc/info/index"
      if (this.$route.path.indexOf("/fakuma") >= 0) {
        r = "/fakuma/pc/info/index"
      }
      this.$router.push(r)
    }
  }
};
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
.navWrap {
  background: #f5f5f5;
  .navBox {
    display: flex;
    flex-direction: row-reverse;
    line-height: 40px;
    font-size: 14px;
    .langBox {
      width: 45px;
    }
    .loginBtn {
      margin-left: 20px;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
      // img:last-child {
      //   display: none;
      // }
      // &:hover img:first-child {
      //   display: none;
      // }
      // &:hover img:last-child {
      //   display: inline-block;
      // }
    }
    .navImg {
      vertical-align: middle;
      margin-top: -3px;
    }
    .search {
      margin-right: 15px;
      cursor: pointer;
      img:last-child {
        display: none;
      }
      &:hover img:first-child {
        display: none;
      }
      &:hover img:last-child {
        display: inline-block;
      }
    }
  }
}
</style>
